<template>
  <div class="notification-container">
    <!-- 通知按钮 -->
    <button class="notification-trigger" @click="togglePanel">
      <span class="notification-icon">🔔</span>
      <span class="notification-badge" v-if="unreadCount > 0">{{ unreadCount }}</span>
    </button>

    <!-- 通知面板 -->
    <div class="notification-panel" :class="{ 'active': isPanelOpen }">
      <div class="panel-header">
        <h3 class="panel-title">通知</h3>
        <div class="panel-actions">
          <button class="action-btn" @click="markAllAsRead">
            <span>全部已读</span>
          </button>
          <button class="action-btn" @click="closePanel">
            <span>✕</span>
          </button>
        </div>
      </div>

      <div class="panel-content">
        <div v-if="notifications.length === 0" class="empty-state">
          <span class="empty-icon">🔔</span>
          <span class="empty-text">暂无通知</span>
        </div>
        
        <div v-else class="notifications-list">
          <div 
            v-for="notification in notifications" 
            :key="notification.id"
            class="notification-item"
            :class="{ 'unread': !notification.read }"
            @click="handleNotificationClick(notification)"
          >
            <div class="notification-icon-wrapper">
              <span class="notification-type-icon">{{ notification.icon }}</span>
              <div v-if="!notification.read" class="unread-indicator"></div>
            </div>
            <div class="notification-content">
              <div class="notification-title">{{ notification.title }}</div>
              <div class="notification-message">{{ notification.message }}</div>
              <div class="notification-time">{{ formatTime(notification.time) }}</div>
            </div>
            <button class="dismiss-btn" @click.stop="dismissNotification(notification.id)">
              <span>✕</span>
            </button>
          </div>
        </div>
      </div>

      <div class="panel-footer">
        <button class="view-all-btn" @click="viewAllNotifications">
          查看全部通知
        </button>
      </div>
    </div>

    <!-- 通知遮罩层 -->
    <div 
      class="notification-overlay" 
      v-show="isPanelOpen"
      @click="closePanel"
    ></div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const isPanelOpen = ref(false)
const notifications = ref([
  {
    id: 1,
    type: 'warning',
    title: '库存预警',
    message: '商品"苹果 iPhone 15"库存不足，当前库存: 5件',
    icon: '⚠️',
    time: new Date(Date.now() - 30 * 60 * 1000), // 30分钟前
    read: false
  },
  {
    id: 2,
    type: 'success',
    title: '订单完成',
    message: '订单 #20241201001 已完成，金额: ¥128.50',
    icon: '✅',
    time: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2小时前
    read: false
  },
  {
    id: 3,
    type: 'info',
    title: '系统更新',
    message: '收银系统已更新到最新版本 v2.1.0',
    icon: 'ℹ️',
    time: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4小时前
    read: true
  },
  {
    id: 4,
    type: 'success',
    title: '会员注册',
    message: '新会员"李四"已注册，会员号: M002',
    icon: '👤',
    time: new Date(Date.now() - 6 * 60 * 60 * 1000), // 6小时前
    read: true
  }
])

// 计算属性
const unreadCount = computed(() => {
  return notifications.value.filter(n => !n.read).length
})

// 切换面板
const togglePanel = () => {
  isPanelOpen.value = !isPanelOpen.value
}

// 关闭面板
const closePanel = () => {
  isPanelOpen.value = false
}

// 标记全部为已读
const markAllAsRead = () => {
  notifications.value.forEach(notification => {
    notification.read = true
  })
}

// 处理通知点击
const handleNotificationClick = (notification) => {
  notification.read = true
  
  // 根据通知类型执行相应操作
  switch (notification.type) {
    case 'warning':
      console.log('处理库存预警')
      // 可以跳转到库存管理页面
      break
    case 'success':
      console.log('处理订单完成')
      // 可以跳转到订单详情页面
      break
    case 'info':
      console.log('处理系统更新')
      // 可以显示更新详情
      break
  }
}

// 删除通知
const dismissNotification = (id) => {
  const index = notifications.value.findIndex(n => n.id === id)
  if (index > -1) {
    notifications.value.splice(index, 1)
  }
}

// 查看全部通知
const viewAllNotifications = () => {
  console.log('查看全部通知')
  closePanel()
  // 这里可以跳转到通知管理页面
}

// 格式化时间
const formatTime = (time) => {
  const now = new Date()
  const diff = now - time
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (minutes < 1) {
    return '刚刚'
  } else if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else {
    return `${days}天前`
  }
}

// 添加新通知
const addNotification = (notification) => {
  const newNotification = {
    id: Date.now(),
    read: false,
    time: new Date(),
    ...notification
  }
  notifications.value.unshift(newNotification)
}

// 暴露方法供父组件调用
defineExpose({
  addNotification
})
</script>

<style scoped>
.notification-container {
  position: relative;
}

.notification-trigger {
  position: relative;
  background: none;
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.notification-trigger:hover {
  background: #f5f7fa;
}

.notification-icon {
  font-size: 18px;
  color: #606266;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #f56c6c;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* 通知面板 */
.notification-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.notification-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.panel-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  background: none;
  border: none;
  color: #606266;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  transition: background-color 0.3s ease;
}

.action-btn:hover {
  background: #f5f7fa;
}

.panel-content {
  max-height: 400px;
  overflow-y: auto;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  color: #909399;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 14px;
}

.notifications-list {
  padding: 0;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s ease;
  gap: 12px;
}

.notification-item:hover {
  background: #f5f7fa;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.unread {
  background: #f0f9ff;
}

.notification-icon-wrapper {
  position: relative;
  flex-shrink: 0;
}

.notification-type-icon {
  font-size: 20px;
}

.unread-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #409eff;
  border-radius: 50%;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
  line-height: 1.4;
}

.notification-message {
  font-size: 13px;
  color: #606266;
  margin-bottom: 6px;
  line-height: 1.4;
}

.notification-time {
  font-size: 12px;
  color: #909399;
}

.dismiss-btn {
  background: none;
  border: none;
  color: #909399;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.dismiss-btn:hover {
  color: #606266;
}

.panel-footer {
  padding: 12px 20px;
  border-top: 1px solid #e4e7ed;
  text-align: center;
}

.view-all-btn {
  background: none;
  border: none;
  color: #409eff;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.view-all-btn:hover {
  background: #f0f9ff;
}

/* 通知遮罩层 */
.notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .notification-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    border-radius: 0;
    transform: translateX(100%);
  }

  .notification-panel.active {
    transform: translateX(0);
  }
}

@media (max-width: 480px) {
  .notification-panel {
    width: 100%;
    max-width: none;
  }
}
</style> 